<template>
    <div class="cate_card" :style="{width:width,height:height,margin:margin}"  v-for="(item,index) in data" @click="getgoodsList(item)">
        <img :src="`http://101.132.181.9/api/${item.product_picture}`" alt="">
        <div class="title">{{item.product_name}}</div>
        <div class="text">{{item.product_title}}</div>
        <div class="price">
            <span class="left">{{item.product_selling_price}}元</span>
            <span class="right" v-show="item.product_selling_price != item.product_price">{{item.product_price}}元</span>
        </div>
    </div>

</template>
<script setup>
 import { useRouter } from 'vue-router'
 import { defineProps } from 'vue'

const props = defineProps({
    data:{
        required:true,
        type:Array,
        default:()=>[]
    },
    width:{
        required:true,
        type:String,
        default:'24%'
    },
    height:{
        required:true,
        type:String,
        default:'48%'
    },
    margin:{
        required:true,
        type:String,
        default:'0'
    }
})
const router = useRouter();
const getgoodsList = (item)=>{
    // console.log(item);
    router.push({
        path:'/goodslist',
        query:{
            'id':item.product_id
        }
    })
}

</script>
<style lang="scss" scoped>
    .cate_card{    
        background: #fff;
        width: 24%;
        height:48%;
        padding: 10px;
        text-align: center;
        line-height: 26px;
        img{
            width: 70%;
            margin-bottom: 24px;
        }
        .title{
            font-size: 14px;
        }
        .text{
            font-size: 14px;
            color: #777;
        }
        .price{
            font-size: 16px;
            .left{
                color: orangered;
            }
            .right{
                color: #777;
                text-decoration: line-through;
                margin-left: 10px;
            }
        }
    }
    .cate_card:hover{
        box-shadow: 0 0 10px #777;
        transform: scale(1.05);
    }
</style>